﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>新元素添加滚动效果</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <style>
        .myscroll {
            width: 300px;
            height: 260px;
            border: 1px solid #ccc;
            line-height: 26px;
            font-size: 12px;
            overflow: auto;
        }

        .myscroll ul {
            margin: 0;
            padding: 0;
        }

        .myscroll li {
            height: 26px;
            margin-left: 25px;
            list-style: none;
            animation: appear 1s;
            transform-origin: top;
        }

        @keyframes appear {
            from {
                height: 0;
                transform: scaleY(0);
            }
            to {
                height: 26px;
                transform: scaleY(1);
            }
        }

        .myscroll a {
            color: #333;
            text-decoration: none;
        }

        .myscroll a:hover {
            color: #ED5565;
            text-decoration: underline;
        }
    </style>
</head>

<body>

<div class="myscroll">
    <ul>
        <li><a href="#">用FlexSlider制作支付宝2013版幻灯片</a></li>
        <li><a href="#">扁平化UI/Flat UI Kit(PSD)</a></li>
        <li><a href="#">童趣卡通圣诞老人矢量素材(EPS)</a></li>
        <li><a href="#">63个线性图标素材(PSD)</a></li>
        <li><a href="#">15个音乐类图标素材(AI)</a></li>
        <li><a href="#">jQuery侧边导航插件SidebarJS</a></li>
        <li><a href="#">jQuery计时器插件TimeCircles</a></li>
        <li><a href="#">jQuery仿Google Play幻灯片效果插件plusview</a></li>
        <li><a href="#">100个圣诞节矢量图标(PSD/SVG)</a></li>
        <li><a href="#">用FlexSlider制作《枪神纪》幻灯片效果</a></li>
        <li><a href="#">用FlexSlider制作支付宝2013版幻灯片</a></li>
        <li><a href="#">扁平化UI/Flat UI Kit(PSD)</a></li>
        <li><a href="#">童趣卡通圣诞老人矢量素材(EPS)</a></li>
        <li><a href="#">63个线性图标素材(PSD)</a></li>
        <li><a href="#">15个音乐类图标素材(AI)</a></li>
        <li><a href="#">jQuery侧边导航插件SidebarJS</a></li>
        <li><a href="#">jQuery计时器插件TimeCircles</a></li>
        <li><a href="#">jQuery仿Google Play幻灯片效果插件plusview</a></li>
        <li><a href="#">100个圣诞节矢量图标(PSD/SVG)</a></li>
        <li><a href="#">用FlexSlider制作《枪神纪》幻灯片效果</a></li>
    </ul>
</div>
<script>
    var x = 1;
    setInterval(function () {
        var li = '<li><a href="#">最新添加的' + x + '</a></li>';
        $('.myscroll ul').prepend(li); //在开头添加最新一条
        $('.myscroll ul li:last-child').remove(); //删除最后一条
        x++;
//        $('.myscroll').animate({scrollTop: 0}, 300); //自动滚动到开头位置
    }, 3000);
</script>

</body>
</html>